<template>
  <div>
    <h1 v-show="one">v-show控制标签显示隐藏</h1>
    <h1 v-if="two">v-if也能控制标签显示隐藏</h1>
    <div>
      <p v-if="age > 7">我上小学了</p>
      <p v-else>我上大学了</p>
    </div>
  </div>
</template>

<script>
//目标： v-show 和 v-if
//作用： 控制标签显示/隐藏
//语法： v-show="vue变量"    v-if="vue变量"
//注意： vue 变量为true（显示）/flase(隐藏/销毁)
//      v-show 隐藏 用display:none 方式 频繁切换用v-show
//      v-if   隐藏 用 从dom 树删除方式
//目标：v-if 和 v-else
//作用：场景 2块标签， 要“互斥”显示
export default {
  data() {
    return {
      one: true,
      twe: true,
      age: "18",
    };
  },
};
</script>

<style>
</style>